<template>
  <div>
    <div style="width: 100%">
      <h1 style="display: inline-block">注册账号</h1>
    </div>
    <div class="kuai">
      <el-form
        status-icon
        :rules="rules"
        ref="userMessage"
        :model="userMessage"
        label-width="100px"
      >
        <el-form-item label="姓名：">
          <el-input v-model="userMessage.username"></el-input>
        </el-form-item>
        <el-form-item label="昵称：" prop="nickname">
          <el-input v-model="userMessage.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="pwd">
          <el-input type="password" v-model="userMessage.pwd"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkpwd">
          <el-input type="password" v-model="userMessage.checkpwd"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-input v-model="userMessage.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input v-model="userMessage.age"></el-input>
        </el-form-item>
        <el-form-item label="所在城市：">
          <el-input v-model="userMessage.city"></el-input>
        </el-form-item>
        <el-form-item label="电话：" prop="tle">
          <el-input v-model="userMessage.tle"></el-input>
        </el-form-item>
        <el-form-item label="爱好：">
          <el-input v-model="userMessage.plike"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：">
          <el-input v-model="userMessage.email"></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="identify">
          <el-radio-group v-model="userMessage.identify">
            <el-radio label="0">管理员</el-radio>
            <el-radio label="1">用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('userMessage')"
            >确认</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserAdd",
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.userMessage.checkpwd !== "") {
          this.$refs.userMessage.validateField("checkpwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userMessage.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userMessage: {
        username: "",
        nickname: "",
        pwd: "",
        checkpwd: "",
        sex: "",
        tle: "",
        age: "",
        city: "",
        tle: "",
        plike: "",
        email: "",
        identify: "",
      },
      rules: {
        pwd: [{ validator: validatePass, trigger: "blur" }],
        checkpwd: [{ validator: validatePass2, trigger: "blur" }],
        tle: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度在11个字符", trigger: "blur" },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit(formname) {
      console.log(this.userMessage);
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let url = "/user/add";
          let param = this.$qs.stringify(this.userMessage);
          this.$axios.post(url, param).then((resp) => {
            let f = resp.data;
            if (f) {
              this.$message({
                type: "success",
                message: "注册成功!",
              });
               this.$router.push('/Login')
              
            } else {
              this.$message({
                type: "error",
                message: "注册失败!",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<!-- scoped="scoped"表示当前样式属于局部样式，只在当前组件中有效-->
<style scoped="scoped">
div {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.kuai {
  font-size: 20px;
  width: 800px;
  height: 650px;
  margin: auto;
  position: relative;
  top: 70px;
  border: 1px solid black;
  box-shadow: 10px 10px 10px #eb860a;
  background-color: rgba(231, 237, 238, 0.4);
  padding: 10px;
}
.el-form-item {
  margin-bottom: 20px;
}
</style>
